<template>
	<view class="con">
		<view class="com-btm" :style="{width:width+'%'}">
			<view class="title" @tap="jump(targgetId)">
				<slot></slot>
			</view>
		</view>
		<view class="img_icon" v-if="icon" @tap="toUser()">
			<image src="../static/my.png" mode=""></image>
		</view>
	</view>
	
</template>

<script>
	export default {
		name: "button-btm",
		props: {
			targgetId: Number,
			width: {
				type: Number,
				default: 100
			},
			icon:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			jump(targgetId) {
				this.$parent.btnJump(targgetId)
			},
			toUser(){
				uni.navigateTo({
					url: '/pages/index/user'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.con{
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}
	
	.img_icon{
		position: fixed;
		bottom: -2px;
		right: 2%;
		width: 10%;
		padding: 28rpx 36rpx 38rpx;
		background-color: #FFFFFF;
		border-top: 2rpx solid #f6f7fb;
		
		image{
			width: 64rpx;
			height: 64rpx;
		}
	}
	
	.com-btm {
		position: fixed;
		bottom: 0px;
		width: 100%;
		padding: 20rpx 64rpx 40rpx;
		box-sizing: border-box;
		border-top: 2rpx solid #f6f7fb;
		background-color: #FFFFFF;
		// z-index: 100;

		.title {
			width: 100%;
			background-color: $public-oclor;
			height: 80rpx;
			border-radius: 80rpx;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
		}
	}
</style>